<template>
  <div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import mapJson from "@/assets/MapData/china.json";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
console.log(props.data);

// 1. 初始化echarts实例
let myChart = null;
const target = ref(null);
onMounted(() => {
  echarts.registerMap("china", mapJson);
  myChart = echarts.init(target.value);
  renderChart();
});

// 2. 构建options配置对象
const renderChart = () => {
  const options = {
    // 时间线
    timeline: {
      data: props.data.voltageLevel,
      axisType: "category", // 类目轴
      autoPlay: true, // 自动播放
      playInterval: 3000, // 播放间隔
      left: "10%",
      right: "10%",
      bottom: "0%",
      width: "80%",
      label: {
        normal: {
          textStyle: {
            color: "#ddd",
          },
        },
        emphasis: {
          // 高亮
          textStyle: {
            color: "#fff",
          },
        },
      },
      symbolSize: 10,
      lineStyle: {
        color: "#555",
      },
      // 时间线节点样式
      checkpointStyle: {
        borderColor: "#888",
        borderWidth: 2,
      },
      // 控制按钮样式
      controlStyle: {
        showNextBtn: true,
        showPrevBtn: true,
        normal: {
          color: "#666",
          borderColor: "#666",
        },
        emphasis: {
          color: "#aaa",
          borderColor: "#aaa",
        },
      },
    },
    baseOption: {
      // 柱状图位置配置
      grid: {
        right: "2%",
        top: "15%",
        bottom: "10%",
        width: "20%",
      },
      // 地图配置
      geo: {
        show: true,
        map: "china",
        roam: true, // 是否开启地图缩放和平移
        zoom: 0.8,
        center: [113.83531246, 34.0267395887], // 地图中心点(经纬度)
        itemStyle: {
          normal: {
            borderColor: "rgba(147, 235, 248, 1)",
            borderWidth: 1,
            areaColor: {
              type: "radial", // 径向渐变
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                // 0% 处的颜色
                {
                  offset: 0,
                  color: "rgba(147, 235, 248, 0)",
                },
                // 100% 处的颜色
                {
                  offset: 1,
                  color: "rgba(147, 235, 248, .2)",
                },
              ],
            },
          },
          // 鼠标移入的色值
          emphasis: {
            areaColor: "#389BB7",
            borderWidth: 0,
          },
        },
      },
    },
    // 时间线下的多个图表
    options: [],
  };

  props.data.voltageLevel.forEach((item, index) => {
    options.options.push({
      backgroundColor: "#142037",
      title: [
        {
          text: "2019-2023 年度数据统计",
          left: "0%",
          top: "0%",
          textStyle: {
            color: "#ccc",
            fontSize: 30,
          },
        },
        {
          id: "statistic",
          text: item + "年数据统计情况",
          right: "0%",
          textStyle: {
            color: "#ccc",
            fontSize: 20,
          },
        },
      ],
      xAxis: {
        type: "value",
        scale: true, // 坐标轴脱离 0 值比例(脱离时，坐标刻度不会强制包含零刻度)
        position: "top",
        solitLine: {
          show: false,
        },
        asxisLine: {
          show: false,
        },
        asxisTick: {
          show: false,
        },
        asxisLabel: {
          margin: 2,
          textStyle: {
            color: "#aaa",
          },
        },
      },
      yAxis: {
        type: "category",
        asxisLine: {
          show: true,
          lineStyle: {
            color: "#ddd",
          },
        },
        asxisTick: {
          show: false,
        },
        asxisLabel: {
          interval: 0,
          textStyle: {
            color: "#ddd",
          },
        },
        data: props.data.categoryData[item].map((item) => item.name),
      },
      series: [
        {
          type: "bar",
          zlevel: 1.5, // 柱状图层级
          itemStyle: {
            normal: {
              color: props.data.colors[index],
            },
          },
          data: props.data.categoryData[item].map((item) => item.value),
        },
        // 散点图
        {
          type: "effectScatter", // 散点（气泡）图
          coordinateSystem: "geo", // 使用地理坐标系
          data: props.data.topData[item],
          symbolSize: function (val) {
            return val[2] / 4;
          },
          showEffectOn: "render", // 绘制完成后显示特效
          // 展示涟漪特效
          rippleEffect: {
            brushType: "stroke", // 波纹绘制方式
          },
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: props.data.colors[index],
              shadowBlur: 5,
              shadowColor: props.data.colors[index],
            },
          },
        },
      ],
    });
  });
  myChart.setOption(options);
};

watch(() => props.data, renderChart);
// 3. 通过实例.setOption(option)渲染图表
</script>
<style lang="scss" scoped>
</style> 